const router = require("./router.config.js");
const webpack = require("webpack");
const path = require('path');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html模板
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 分离css
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除目录等
let pathsToClean = ['dist',];
const PurifyCSSPlugin = require("purifycss-webpack"); //消除冗余的css
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩css

var getHtmlConfig = function (name, chunks) {
    return {
        template: `./src/${name}.html`,
        filename: `${name}.html`, 
        favicon: './favicon.ico',
        inject: true,
        hash: true, //开启hash  ?[hash]
        chunks: chunks,//页面要引入的包
        chunksSortMode: "manual", // manual根据chunks的位置手动排序
        minify: process.env.NODE_ENV == "development" ? false : {
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: true, //折叠空白区域 也就是压缩代码
            removeAttributeQuotes: true, //去除属性引用
        },
    };
};

var pluginsArray =  [
    new ExtractTextPlugin('style/[name].[chunkhash:8].css'), //都提到dist目录下的style目录中
    new CleanWebpackPlugin(pathsToClean),
    new PurifyCSSPlugin({
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
    }),
    new OptimizeCSSPlugin(),
    new webpack.DefinePlugin({ // 全局变量
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        'SOMETHINE': JSON.stringify('这是全局变量呀。。')
    }),
    // new webpack.ProvidePlugin({
    //     $: "jquery"
    // }),
]
router.forEach((element) => {
    pluginsArray.push(new HtmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
})
module.exports = pluginsArray